<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <!-- 
        请补全JavaScript代码，要求如下：
        1. 监听对象属性的变化
        2. 当"person"对象的属性发生变化时，页面中与该属性相关的数据同步更新
        注意：
        1. 必须使用Object.defineProperty实现且触发set方法时更新视图
        2. 可以使用预设代码"_render"函数 400 + 150 + 500 + 900 + 150 -> 7月收入2000+
     -->
    <style>
        ul {
            list-style: none;
        }
    </style>
    <ul></ul>

    <script>
        var ul = document.querySelector('ul');
        var person = { sex: '男', age: '25', name: '王大锤', height: 28, weight: 32 };
        function render(element) {
            var str = `<li>姓名：<span>${person.name}</span></li>
                       <li>性别：<span>${person.sex}</span></li>
                       <li>年龄：<span>${person.age}</span></li>
                       <li>身高：<span>${person.height}</span></li>
                       <li>体重：<span>${person.weight}</span></li>`
            element.innerHTML = str;
        }
        render(ul);
        // 补全代码
        /*
           创建”Observe“函数，接收一个对象参数，首先判断该对象参数是否合法，之后通过遍历对象的所有属性进行拦截操作。
           尽管可以直接使用Object.defineProperty函数对”person“对象进行拦截，
           但是可以通过创建”Observe“函数来封装对某个对象的属性劫持功能，之后可以复用此函数。
           创建“defineReactive”函数，接收三个参数分别为该对象、对象属性、对象属性值。
           该函数内部使用Object.defineProperty函数对该对象的属性值进行拦截，且每当触发set时，调用”render“方法重新渲染视图
       */
        function Observe(target) {
            if (typeof target !== 'object' || target == null) {
                return target
            }
            for (var key in target) {
                defineReactive(target, key, target[key])
            }
        }
        function defineReactive(target, key, value) {
            Object.defineProperty(target, key, {
                get: function () {
                    return value
                },
                set: function (newVal) {
                    if (newVal !== value) {
                        value = newVal
                        render(ul)
                    }

                }

            })
        }
        Observe(person)

    </script>
</body>

</html>